---
title: 'Installation'
description: 'How to install Million.js into your React project'
---

import { Callout, Tabs, Tab, Steps } from 'nextra-theme-docs';

# Installation

Million.js assumes that you have an existing React project. To learn about how to create a React app, please see [React's documentation](https://react.dev).

## Install via CLI

The Million.js CLI will automatically install the package and configure your project for you.

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']} storageKey="selected-manager">
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  npx million@latest
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  pnpx million@latest
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  yarn add million@latest
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  bunx million@latest
  ```
  </Tab>
</Tabs>


<Callout type="info">
  Million.js is compatible with React 16 and above. If you're using an older
  version of React, you'll need to upgrade first.

  You will also need to make sure you are on Node 18 and above.
</Callout>

That's it! Your project is now running on Million.js 🎉

## Install manually

If you have issues [installing via the CLI](#install-via-cli), or you have a custom setup, you can
install Million.js manually.

Notice that there are two modes you can choose: **Automatic** and **Manual**:

- **Automatic mode** will automatically configure, analyze, and optimize your project for you.
This is the recommended mode.

- **Manual mode** will require you to write code to [optimize certain parts of
your project](/docs/manual-mode/manual-mode). This mode is recommended for advanced users who want to have more control over their project.

<Tabs items={['Automatic', 'Manual']} storageKey="mode">

<Tab>

<Steps>

### Install Million.js

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']} storageKey="selected-pkg-manager">
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  npm install million
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  pnpm install million
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  yarn add million
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  bun add million
  ```
  </Tab>
</Tabs>

### Add the compiler to your application

<Tabs items={['Next.js', 'Astro', 'Gatsby', 'Vite','Remix', 'Create React App', 'Webpack', 'Rollup']} storageKey="selected-bundler-compiler">
<Tab>
Million.js is supported within the `/app` ("use client" components only) and `/pages`

```js filename="next.config.mjs"
import million from "million/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

const millionConfig = {
  auto: true,// if you're using RSC: auto: { rsc: true },
};

export default million.next(nextConfig, millionConfig);
```
</Tab>

<Tab>
```js filename="astro.config.mjs"
import { defineConfig } from "astro/config";
import million from "million/compiler";

export default defineConfig({
   vite: {
     plugins: [million.vite({ mode: "react", server: true, auto: true })],
   },
});
```
</Tab>

<Tab>
```js filename="gatsby-node.js"
const million = require("million/compiler");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [million.webpack({ mode: "react", server: true, auto: true })],
  });
};
```
</Tab>

<Tab>
```js filename="vite.config.js"
import million from "million/compiler";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [million.vite({ auto: true }), react()],
});
```
</Tab>

<Tab>
```js filename="vite.config.js"
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import million from "million/compiler";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [million.vite({ auto: true }), remix()],
});
```
</Tab>

<Tab>
  <Callout type="warning">
    If you are using a [Create React App (CRA)](https://create-react-app.dev/) Setup, you will need to [configure Craco](https://craco.js.org/docs/getting-started/) before proceeding.
  </Callout>

```js filename="craco.config.js"
const million = require("million/compiler");

module.exports = {
  webpack: {
    plugins: { add: [million.webpack({ auto: true })] },
  },
};
```
</Tab>

<Tab>
```js filename="webpack.config.js"
const million = require("million/compiler");
module.exports = {
  plugins: [million.webpack({ auto: true })],
};
```
</Tab>

<Tab>
```js filename="rollup.config.js"
import million from "million/compiler";

export default {
  plugins: [million.rollup({ auto: true })],
};
```
</Tab>
</Tabs>

</Steps>
</Tab>



<Tab>

<Steps>

### Install Million.js


<Tabs items={['npm', 'pnpm', 'yarn', 'bun']} storageKey="selected-pkg-manager">
{/* prettier-ignore */}
<Tab>
```bash copy
npm install million
```

  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  pnpm install million
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  yarn add million
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  bun add million
  ```
  </Tab>
</Tabs>

### Add the compiler to your application

<Tabs items={['Next.js', 'Astro', 'Gatsby', 'Vite', 'Remix', 'Create React App', 'Webpack', 'Rollup']} storageKey="selected-bundler-compiler">
<Tab>
Million.js is supported within the `/app` ("use client" components only) and `/pages`

```js filename="next.config.mjs"
import million from "million/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

export default million.next(nextConfig);
```
</Tab>

<Tab>
```js filename="astro.config.mjs"
import { defineConfig } from "astro/config";
import million from "million/compiler";

export default defineConfig({
  vite: {
    plugins: [million.vite({ mode: "react", server: true })],
  },
});
```
</Tab>

<Tab>
```js filename="gatsby-node.js"
const million = require("million/compiler");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [million.webpack({ mode: "react", server: true })],
  });
};
```
</Tab>

<Tab>
```js filename="vite.config.js"
import million from "million/compiler";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [million.vite(), react()],
});
```
</Tab>

<Tab>
```js filename="vite.config.js"
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import million from "million/compiler";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [million.vite(), remix()],
});
```
</Tab>

<Tab>
<Callout type="warning">
  If you are using a [Create React App (CRA)](https://create-react-app.dev/) Setup, you will need to [configure Craco](https://craco.js.org/docs/getting-started/) before proceeding.
</Callout>
```js filename="craco.config.js"
const million = require("million/compiler");
module.exports = {
  webpack: {
    plugins: { add: [million.webpack()] },
  },
};
```
</Tab>

<Tab>
```js filename="webpack.config.js"
const million = require("million/compiler");
module.exports = {
  plugins: [million.webpack()],
};
```
</Tab>

<Tab>
```js filename="rollup.config.js"
import million from "million/compiler";

export default {
  plugins: [million.rollup()],
};
```
</Tab>
<Callout type="warning">
  The compiler will only try compiling `.jsx` or `.tsx` files and will not try doing any transformation to any other file. You either convert your file formats to those formats or use the [Manual Mode](/docs/manual-mode/manual-mode). 
</Callout>

</Tabs>

</Steps>

</Tab>

</Tabs>
